<template>
  <view class="chat-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input-box">
        <wd-icon name="search" size="16px" color="#999" class="search-icon" />
        <input
          v-model="searchKeyword"
          class="search-input"
          placeholder="搜索宗亲"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 消息类型选项卡 -->
    <view class="tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ 'tab-active': activeTab === tab.name }"
        @click="activeTab = tab.name"
      >
        {{ tab.title }}
      </view>
    </view>

    <!-- 消息列表 -->
    <view v-if="activeTab === 'messages'" class="chat-list">
      <view
        v-for="(item, index) in chatList"
        :key="index"
        class="chat-item"
        @click="navigateToChatDetail(item)"
      >
        <view class="avatar-container">
          <image
            class="avatar"
            :src="item.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg'"
            mode="aspectFill"
          />
          <view v-if="item.unreadCount > 0" class="badge">
            {{ item.unreadCount > 99 ? "99+" : item.unreadCount }}
          </view>
        </view>
        <view class="chat-content">
          <view class="chat-top">
            <view class="chat-name">{{ item.name }}</view>
            <view class="chat-time">{{ item.lastTime }}</view>
          </view>
          <view class="chat-bottom">
            <view class="chat-msg">{{ item.lastMessage }}</view>
            <view class="chat-status">
              <view v-if="item.isMute" class="mute-icon">
                <wd-icon name="sound" size="14px" color="#999" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系人列表 -->
    <view v-if="activeTab === 'contacts'" class="contact-list">
      <view v-for="(group, groupIndex) in contactList" :key="groupIndex" class="contact-group">
        <view class="contact-group-title">{{ group.title }}</view>
        <view
          v-for="(contact, contactIndex) in group.items"
          :key="contactIndex"
          class="contact-item"
          @click="navigateToContactDetail(contact)"
        >
          <image
            class="contact-avatar"
            :src="contact.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png'"
            mode="aspectFill"
          />
          <view class="contact-info">
            <view class="contact-name">{{ contact.name }}</view>
            <view class="contact-relation">{{ contact.relation }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 群组列表 -->
    <view v-if="activeTab === 'groups'" class="group-list">
      <view
        v-for="(group, index) in groupList"
        :key="index"
        class="group-item"
        @click="navigateToGroupChat(group)"
      >
        <image
          class="group-avatar"
          :src="group.avatar || '/static/group-avatar.png'"
          mode="aspectFill"
        />
        <view class="group-info">
          <view class="group-name">{{ group.name }}</view>
          <view class="group-desc">{{ group.memberCount }}人 · {{ group.description }}</view>
        </view>
      </view>
    </view>

    <!-- 新建聊天按钮 -->
    <!-- <view class="new-chat-btn" @click="showActionSheet">
      <wd-icon name="add" size="18px" color="#fff" />
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

// 搜索关键词
const searchKeyword = ref("");

// 标签页配置
const tabs = [
  { title: "消息", name: "messages" },
  { title: "宗亲", name: "contacts" },
  { title: "群组", name: "groups" },
];

// 当前选中的标签页
const activeTab = ref("messages");

// 聊天列表数据
const chatList = ref([
  {
    id: "1",
    name: "李家族长",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    lastMessage: "最近宗祠修缮工作进展如何？",
    lastTime: "10:30",
    unreadCount: 2,
    isMute: false,
  },
  {
    id: "2",
    name: "宗祠管理群",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    lastMessage: "李二狗: 明天祭祖活动需要准备什么？",
    lastTime: "昨天",
    unreadCount: 0,
    isMute: true,
  },
  {
    id: "3",
    name: "李家三叔",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    lastMessage: "周末有空来宗祠坐坐，讨论一下家谱整理的事情",
    lastTime: "昨天",
    unreadCount: 0,
    isMute: false,
  },
  {
    id: "4",
    name: "李氏宗亲会",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    lastMessage: "[图片]",
    lastTime: "周一",
    unreadCount: 5,
    isMute: false,
  },
  {
    id: "5",
    name: "李家大姐",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    lastMessage: "记得帮我带份家谱资料",
    lastTime: "周日",
    unreadCount: 0,
    isMute: false,
  },
]);

// 联系人列表数据
const contactList = ref([
  {
    title: "A",
    items: [{ name: "阿强", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "五代孙" }],
  },
  {
    title: "B",
    items: [{ name: "宝宝", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "七代孙女" }],
  },
  {
    title: "L",
    items: [
      { name: "李家大姐", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "四代孙女" },
      { name: "李家三叔", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "三代孙" },
      { name: "李家族长", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "二代孙" },
      { name: "李二狗", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "六代孙" },
    ],
  },
  {
    title: "Z",
    items: [{ name: "志强", avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg", relation: "五代孙" }],
  },
]);

// 群组列表数据
const groupList = ref([
  {
    id: "1",
    name: "宗祠管理群",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    memberCount: 15,
    description: "宗祠日常事务管理",
  },
  {
    id: "2",
    name: "李氏宗亲会",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    memberCount: 120,
    description: "所有宗亲交流群",
  },
  {
    id: "3",
    name: "祭祖活动群",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    memberCount: 56,
    description: "2024年祭祖活动筹备",
  },
  {
    id: "4",
    name: "家谱整理小组",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    memberCount: 8,
    description: "数字化家谱整理工作",
  },
]);

// 搜索处理
function handleSearch() {
  console.log("搜索关键词：", searchKeyword.value);
  // TODO: 实现搜索功能
}

// 跳转到聊天详情
function navigateToChatDetail(chat: any) {
  uni.navigateTo({
    url: `/pages/chat/detail?id=${chat.id}&name=${encodeURIComponent(chat.name)}&isGroup=${chat.id === "2" || chat.id === "4"}`,
  });
}

// 跳转到联系人详情
function navigateToContactDetail(contact: any) {
  // uni.navigateTo({
  //   url: `/pages/chat/contact-detail?name=${encodeURIComponent(contact.name)}`,
  // });
}

// 跳转到群聊
function navigateToGroupChat(group: any) {
  uni.navigateTo({
    url: `/pages/chat/detail?id=${group.id}&name=${encodeURIComponent(group.name)}&isGroup=true`,
  });
}

// 显示操作菜单
function showActionSheet() {
  // uni.showActionSheet({
  //   itemList: ["发起聊天", "创建群组", "添加联系人"],
  //   success: (res) => {
  //     switch (res.tapIndex) {
  //       case 0:
  //         uni.navigateTo({ url: "/pages/chat/new-chat" });
  //         break;
  //       case 1:
  //         handleCreateGroup();
  //         break;
  //       case 2:
  //         handleAddContact();
  //         break;
  //     }
  //   },
  // });
}

// 创建群组
// function handleCreateGroup() {
//   uni.navigateTo({
//     url: "/pages/chat/create-group",
//   });
// }

// 添加联系人
// function handleAddContact() {
//   uni.navigateTo({
//     url: "/pages/chat/add-contact",
//   });
// }
</script>

<style lang="scss">
.chat-container {
  padding-bottom: 100rpx;
}

.search-box {
  padding: 20rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-input-box {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 30rpx;
}

.search-icon {
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  background-color: transparent;
}

.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 112rpx;
  z-index: 100;
}

.tab-item {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-active {
  color: #3b8dff;
}

.tab-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #3b8dff;
  border-radius: 2rpx;
}

.chat-list {
  background-color: #f8f8f8;
}

.chat-item {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  position: relative;
  margin-right: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
}

.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  min-width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  border-radius: 18rpx;
  padding: 0 6rpx;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.chat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.chat-time {
  font-size: 24rpx;
  color: #999;
}

.chat-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.chat-msg {
  font-size: 28rpx;
  color: #999;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mute-icon {
  margin-left: 10rpx;
}

.contact-group {
  margin-bottom: 20rpx;
}

.contact-group-title {
  padding: 10rpx 30rpx;
  background-color: #f8f8f8;
  font-size: 24rpx;
  color: #999;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.contact-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 30rpx;
  color: #333;
}

.contact-relation {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.group-list {
  padding: 20rpx;
}

.group-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.group-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.group-info {
  flex: 1;
}

.group-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.group-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.new-chat-btn {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #3b8dff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(59, 141, 255, 0.4);
}

.message-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 20rpx 0;
}

.footer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;

  text {
    font-size: 24rpx;
    color: #666;
    margin-top: 6rpx;
  }
}
</style>
